<template>
<div class='about'>
    <!-- <h2>大家好,欢迎大家来到直播间</h2> -->
    <div class="mb-4">
        <el-button>Default</el-button>
        <el-button @click="add" type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-input v-model="input" style="width: 240px" placeholder="Please input" />
        <el-input v-model="password" style="width: 240px" type="password" placeholder="Please input password" show-password />

    </div>
</div>
</template>

<script lang="ts" setup name="About">
import { ref, reactive } from 'vue';
import axios
 from 'axios';


const input = ref('')
const password = ref('')

function add() {
    alert(input.value)
    axios.get('www.baidu.com').then(function(res){
        console.log(res.status)
    })
}
</script>

<style scoped>
.about {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    color: rgb(from color 85 84 84);
    font-size: 18px;
}
</style>